import React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '@/hooks/useTheme';
import { Stack } from 'expo-router';

export default function ThemeSettingsScreen() {
  const { mode, setMode, colors } = useTheme();
  
  const themeOptions = [
    { id: 'light', label: '浅色模式', icon: 'sunny-outline' },
    { id: 'dark', label: '深色模式', icon: 'moon-outline' },
    { id: 'system', label: '跟随系统', icon: 'contrast-outline' },
  ] as const;
  
  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={['bottom']}>
      <Stack.Screen options={{ 
        title: '主题设置',
        headerStyle: { backgroundColor: colors.background },
        headerTintColor: colors.text,
      }} />
      
      <Text style={[styles.title, { color: colors.text }]}>选择主题模式</Text>
      
      <View style={styles.optionsContainer}>
        {themeOptions.map((option) => (
          <Pressable
            key={option.id}
            style={[
              styles.optionItem,
              { 
                backgroundColor: colors.card,
                borderColor: mode === option.id ? colors.primary : colors.border,
                borderWidth: mode === option.id ? 2 : 1,
              },
            ]}
            onPress={() => setMode(option.id)}
          >
            <Ionicons 
              name={option.icon as any} 
              size={24} 
              color={mode === option.id ? colors.primary : colors.text} 
              style={styles.optionIcon}
            />
            <Text 
              style={[
                styles.optionLabel, 
                { 
                  color: mode === option.id ? colors.primary : colors.text,
                  fontWeight: mode === option.id ? '600' : 'normal',
                },
              ]}
            >
              {option.label}
            </Text>
            {mode === option.id && (
              <Ionicons name="checkmark-circle" size={20} color={colors.primary} style={styles.checkIcon} />
            )}
          </Pressable>
        ))}
      </View>
      
      <Text style={[styles.note, { color: colors.subtext }]}>
        选择"跟随系统"将根据您设备的显示设置自动切换主题。
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 16,
  },
  optionsContainer: {
    marginBottom: 24,
  },
  optionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 8,
    marginBottom: 12,
  },
  optionIcon: {
    marginRight: 12,
  },
  optionLabel: {
    fontSize: 16,
    flex: 1,
  },
  checkIcon: {
    marginLeft: 8,
  },
  note: {
    fontSize: 14,
    lineHeight: 20,
    marginTop: 8,
  },
});